<template>
  <div style="height: 100%">
    <hello-world ref="myApp" />
    <div class="titles">
      <span>长沙市府网格远景年地理接线图展示系统</span>
      <div class="date">{{ years }}</div>
    </div>
    <div class="mains">
      <div
        :class="{
          'dhatm mains-d1 center': active == index,
          'center mains-d1': active !== index,
        }"
        v-for="(item, index) in datas"
        :key="index"
        @click="gotoClick(index, item.name)"
      >
        <img :src="item.icon" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div :class="{ 'diaog ds2': diaogShow, 'ds diaog': !diaogShow }">
      <div class="titleDis">
        <p>{{ activeName }}</p>
        <div class="titd2">
          <img
            @click="hideWin"
            style="width: 20px"
            src="@/assets/imgs/close.svg"
          />
        </div>
      </div>

      <ul
        class="uls"
        v-if="activeName !== '供电单元' && activeName !== '虚拟漫游'"
      >
        <li class="lis" v-for="(item, index) in dataslist" :key="item.id">
          <img :src="datas2[activeName]" />
          <span class="lisName">{{ item.name }}</span>
          <div class="divs">
            <!-- <img
              :src="item.status ? img2 : img4"
              @click="gethid(item, index)"
            /> -->
            <img
              :src="activeImg == index ? dh2 : dh"
              @click="getdh(item, index)"
            />
          </div>
        </li>
      </ul>
      <div v-if="activeName == '供电单元'">
        <div
          class="btns"
          v-for="item in gddyList"
          :key="item"
          @click="goGgdy(item)"
        >
          {{ item }}
        </div>
      </div>
      <div v-if="activeName == '虚拟漫游'">
        <el-select v-model="flowLine" filterable placeholder="请选择">
          <el-option
            v-for="item in xianluList"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <div class="btns2">
          <div @click="flowPlay">开始漫游</div>
          <div @click="endPlay">结束漫游</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";

import hwgData from "@/plugins/geojson/hwg.json";
import bdzData from "@/plugins/geojson/bdz.json";
import xianluData from "../../static/json/xlu10kv.json";
import "@/assets/css/index.css";
export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      flowLine: "",
      dataslist: [],
      diaogShow: false,
      active: 99,
      activeImg: null,
      activeName: "",
      years: "",
      dh2: require("@/assets/imgs/dh2.svg"),
      dh: require("@/assets/imgs/dh.svg"),
      img2: require("@/assets/imgs/show.svg"),
      img4: require("@/assets/imgs/hid.svg"),
      datas: [
         { name: "供电单元", icon: require("@/assets/imgs/xt.svg") },
        { name: "变电站", icon: require("@/assets/imgs/bdz.svg") },
        { name: "线路", icon: require("@/assets/imgs/xl.svg") },
        { name: "环网柜", icon: require("@/assets/imgs/hwg.svg") },
         { name: "虚拟漫游", icon: require("@/assets/imgs/xnmy.svg") },
      ],
      datas2: {
        变电站: require("@/assets/imgs/bdz.svg"),
        虚拟漫游: require("@/assets/imgs/xnmy.svg"),
        线路: require("@/assets/imgs/xl.svg"),
        供电单元: require("@/assets/imgs/xt.svg"),
        环网柜: require("@/assets/imgs/hwg.svg"),
      },
      gddyList: [
        "HN-CS-YL-SF-001",
        "HN-CS-YL-SF-002",
        "HN-CS-YL-SF-003",
        "HN-CS-YL-SF-004",
        "HN-CS-YL-SF-005",
        "HN-CS-YL-SF-006",
      ],
      //   变电站
      bdzList: [],
      //   环网柜
      hwgList: [],
      // 线路
      xianluList: [],
    };
  },

  created() {
    this.getYear();
    this.$nextTick(() => {
      // this.adds();

      this.hwgList = hwgData;
      this.xianluList = xianluData;
      this.bdzList = bdzData;
    });
  },
  methods: {
    flowPlay() {
      if (this.flowLine.trim().length > 0) {
        this.$refs.myApp.flowPlay(this.flowLine);
      }
    },
    endPlay() {
        this.$refs.myApp.endPlay();

    },
    hideWin() {
      this.diaogShow = false;
      this.$refs.myApp.hideSupply();
    },
    //   菜单打开
    gotoClick(i, name) {
      this.active = i;
      this.activeImg = null;
      this.activeName = name;
      this.diaogShow = true;
      if (name == "变电站") {
        this.dataslist = this.bdzList;
      } else if (name == "环网柜") {
        this.dataslist = this.hwgList;
      } else if (name == "线路") {
        this.dataslist = this.xianluList;
      } else {
        this.dataslist = [];
      }
    },
    // 显示隐藏
    gethid(it, i) {
      this.bdzList.forEach((r) => {
        if (it.name == r.name) {
          r.status = !r.status;
        }
      });
      this.dataslist = this.bdzList;
      var s = !it.status;
      this.$refs.myApp.getTo(it.id);
    },
    // 新增后定位导航
    getdh(r, i) {
      this.activeImg = i;
      const e = {
        gltfUrl: "",
        scale: 0.8,
        lon: r.lon,
        lat: r.lat,
        height: 90,
        id: null,
        name: r.name,
        activeName: this.activeName,
        icons: "",
      };
      if (this.activeName == "变电站") {
        e.id = r.id;
        e.gltfUrl = "/static/gltf/bdz.gltf";
        this.$refs.myApp.addEntity(e);
      } else if (this.activeName == "环网柜") {
        e.gltfUrl = "/static/gltf/hwg.gltf";
        e.id = "hwg" + i;
        e.scale = 10;
        this.$refs.myApp.getTos(r);
      } else if (this.activeName == "线路") {
        console.log("方法");
        this.$refs.myApp.selectLineByName(r.name);
        return;
      }
      console.log(222);
    },
    // 供电单元
    goGgdy(id) {
      this.$refs.myApp.showsupply(id);
    },
    // 时间
    getYear() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var t = date.getDate();
      m = m < 10 ? "0" + m : m;
      t = t < 10 ? "0" + t : t;
      this.years = y + "年" + m + "月" + t + "日";
    },
    // 去重方法array数组key唯一值
    uniqueArray(array, key) {
      var result = [array[0]];
      for (var i = 1; i < array.length; i++) {
        var item = array[i];
        var repeat = false;
        for (var j = 0; j < result.length; j++) {
          if (item[key] == result[j][key]) {
            repeat = true;
            break;
          }
        }
        if (!repeat) {
          result.push(item);
        }
      }
      return result;
    },
  },
};
</script>
<style>
.el-input__inner {
  background-color: unset;
  color: #fff;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: unset;
}
.el-select {
  width: calc(100% - 20px);
}
.btns2 {
  display: flex;
}
.btns2 div {
  display: flex;
  flex: 1;
  border: 1px solid #fff;
  justify-content: center;
  padding: 5px;
  margin: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.btns2 div:hover {
  color: #00ffff;
  border: 1px solid #00ffff;
}
.el-select-dropdown {
  background-color: rgba(28, 255, 240, 0.4);
  border: 0;
}
</style>
